<template>
	<view>
		<!-- 地址添加 -->
		<view class="dz" v-if="isShow" @click="toAddress">
			<view class="dz_name">
				姓名:{{addRess.username}}
			</view>
			<view class="dz_name">
				电话:{{addRess.userphone}}
			</view>
			<view class="dz_dz">
				地址:{{addRess.useraddress}}
			</view>
		</view>
		<view class="address" v-else>
			<view class="toaddress">
				<button @click="toAddress">点击添加地址</button>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="shopBox">
			<view class="goodsBox" v-for="item in goodsList">
				<view class="goods">
					<view class="imgBox">
						<image :src="baseUrl+item.img" mode=""></image>
					</view>
					<view class="text">
						<view class="title">{{item.goodsname}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
				</view>
				<view class="detailBox">
					<view>商品名称：</view>
					<view class="nameBox">{{item.goodsname}}</view>
				</view>
				<view class="detailBox">
					<view>商品单价：</view>
					<view>￥{{item.price}}</view>
				</view>
				<view class="detailBox">
					<view>商品数量：</view>
					<view>x{{item.num}}</view>
				</view>
			</view>
		</view>
		<!-- 结算金额 -->
		<view class="priceBox">
			<view class="textBox">
				<view class="all">
					合计
				</view>
				<view class="sBox">
					已免运费
				</view>
			</view>
			<view class="textBox">
				<!-- 总金额 -->
				<view class="sumPrice">
					￥{{allPrice}}
				</view>
				<view class="sBox">
					已优惠￥0元
				</view>
			</view>
			<!-- 结算按钮 -->
			<view class="btn">
				<button @click="toPay">去支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	//引入基础地址
	import baseUrl from "@/request/baseUrl.js"
	//引入接口地址
	import {
		orderAdd
	} from "../../request/app.js"
	export default {
		data() {
			return {
				goodsList: [],
				baseUrl: baseUrl,
				addRess: {},
				isShow: false
			}
		},
		methods: {
			//跳转到地址页
			toAddress() {
				uni.navigateTo({
					url: "/pages/address/address"
				})
			},
			//点击进行订单支付
			toPay() {
				let countmoney = 0
				let countnumbe = 0
				let idstr = ""
				this.goodsList.map(item => {
					countmoney += item.price * item.num
					countnumbe += item.num
					idstr += "," + item.id
				})
				//调用订单生成接口
				orderAdd({
					uid: uni.getStorageSync("userInfo").uid,
					countmoney,
					countnumbe,
					address: this.addRess.id,
					idstr
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						//跳转到支付页并传参
						uni.navigateTo({
							url: `../pay/pay?num=${res.data.list.outTradeNo}&money=${countmoney}`
						})
					}
				})

			}
		},
		//页面一加载
		onLoad() {
			//从本地获取商品信息
			this.goodsList = uni.getStorageSync("goodsInfo")
			//从本地获取地址信息
			if (uni.getStorageSync("dizhi")) {
				this.isShow = true
			}
			this.addRess = uni.getStorageSync("dizhi")
		},
		//计算属性
		computed: {
			//合计金额
			allPrice() {
				let sum = 0
				this.goodsList.forEach(item => {
					sum += item.price * item.num
				})
				return sum
			}
		}
	}
</script>

<style>
	.address {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(to bottom, #FF6900, #FF9A00);
		padding-top: 20rpx;
	}

	.toaddress {
		margin-left: 20rpx;
		margin-right: 20rpx;
		height: 100%;
		background-color: #fff;
		overflow: hidden;
	}

	.toaddress>button {
		width: 70%;
		background-color: #FFFAE8;
		margin-top: 100rpx;
	}

	.shopBox {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
		padding-top: 20rpx;
	}

	.goodsBox {
		margin-left: 20rpx;
		margin-right: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.goods {
		width: 100%;
		height: 300rpx;
		padding: 20rpx;
		display: flex;
	}

	.goods>.imgBox>image {
		width: 300rpx;
		height: 300rpx;
	}

	.text {
		margin-right: 20rpx;
		padding-top: 60rpx;
	}

	.text>.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.text>.price {
		margin-top: 40rpx;
		font-size: 40rpx;
		color: #FF6900;
		font-weight: bold;
	}

	.detailBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 35rpx;
		margin-bottom: 20rpx;
		height: 50rpx;
	}

	.detailBox>.nameBox {
		width: 60%;
		overflow: hidden;
	}

	.priceBox {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
		background-color: #fff;
	}

	.textBox {
		padding-top: 25rpx;
	}

	.all {
		font-weight: bold;
		font-size: 40rpx;
	}

	.sBox {
		color: #ccc;
	}

	.sumPrice {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF3333;
	}

	.btn {
		width: 40%;
	}

	.btn>button {
		width: 100%;
		height: 100%;
		background-color: #FF6900;
		line-height: 150rpx;
		color: #fff;
		text-align: center;
		font-size: 40rpx;
	}


	.dz view {
		line-height: 30rpx;
		font-size: 36rpx;
		font-weight: 900;
		margin: 3%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
</style>
